#プラグイン

プラグインは、グラフのデフォルトの動作をカスタマイズまたは変更する最も効率的な方法です。で紹介されています。バージョン2.1.0 (新しいウィンドウが開きます)(グローバルプラグインのみ) で拡張されています。バージョン2.5.0 (新しいウィンドウが開きます)(チャートのプラグインおよびオプションごと)。

#プラグインの使用

プラグインはチャート インスタンス間で共有できます。

const plugin = { /* plugin implementation */ };
// chart1 and chart2 use "plugin"
const chart1 = new Chart(ctx, {
    plugins: [plugin]
});
const chart2 = new Chart(ctx, {
    plugins: [plugin]
});
// chart3 doesn't use "plugin"
const chart3 = new Chart(ctx, {});

プラグインはチャート内で直接定義することもできますplugins設定 (別名.インラインプラグイン):

const chart = new Chart(ctx, {
    plugins: [{
        beforeInit: function(chart, args, options) {
            //..
        }
    }]
});

ただし、カスタマイズを多くのグラフに適用する必要がある場合、このアプローチは理想的ではありません。

#グローバルプラグイン

プラグインはグローバルに登録して、すべてのチャートに適用できます（別名プラグイン）。グローバルプラグイン):

Chart.register({
    // plugin implementation
});

#構成

#プラグインID

プラグインを構成可能にするには、一意の ID を定義する必要があります。

この ID は、npm パッケージ名の規則 (新しいウィンドウが開きます):

• ドットやアンダースコアで始めることはできません
• URL セーフでない文字を含めることはできません
• 大文字を含めることはできません
• 短いものですが、適度に説明的なものにする必要があります

プラグインが公開リリースされる予定の場合は、次のことを確認してください。レジストリ (新しいウィンドウが開きます)その名前のものがすでにあるかどうかを確認してください。この場合、パッケージ名の前に次の文字を付ける必要があることに注意してください。chartjs-plugin-Chart.js プラグイン レジストリに表示されます。

#プラグインオプション

プラグイン オプションはoptions.pluginsconfig にあり、プラグイン ID によってスコープが設定されます。options.plugins.{plugin-id}。

const chart = new Chart(ctx, {
    options: {
        foo: { ... },           // chart 'foo' option
        plugins: {
            p1: {
                foo: { ... },   // p1 plugin 'foo' option
                bar: { ... }
            },
            p2: {
                foo: { ... },   // p2 plugin 'foo' option
                bla: { ... }
            }
        }
    }
});

#プラグインを無効にする

特定のチャート インスタンスのグローバル プラグインを無効にするには、プラグイン オプションを次のように設定する必要があります。false:

Chart.register({
    id: 'p1',
    // ...
});
const chart = new Chart(ctx, {
    options: {
        plugins: {
            p1: false   // disable plugin 'p1' for this instance
        }
    }
});

特定のチャート インスタンスのすべてのプラグインを無効にするには、次のように設定します。options.pluginsにfalse:

const chart = new Chart(ctx, {
    options: {
        plugins: false // all plugins are disabled for this instance
    }
});

#プラグインのデフォルト

プラグイン オプションのデフォルト値を設定できます。defaultsプラグインオブジェクトのエントリ。以下の例では、ユーザーがこのオプションをオーバーライドしない限り、キャンバスの背景色は常にライトグリーンになります。options.plugins.custom_canvas_background_color.color。

const plugin = {
    id: 'custom_canvas_background_color',
    beforeDraw: (chart, args, options) => {
        const {ctx} = chart;
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = options.color;
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
    },
    defaults: {
        color: 'lightGreen'
    }
}

#プラグインコアAPI

詳細については、こちらをご覧ください。既存のプラグイン拡張フック。

#チャートの初期化

プラグインは初期化プロセス中に通知されます。これらのフックを使用して、プラグインが動作するために必要なデータをセットアップできます。

#チャートの更新

プラグインは更新プロセス全体を通じて通知されます。

#スケールアップデート

プラグインは、スケール更新プロセス全体を通じて通知されます。

#レンダリング

プラグインは、レンダリング プロセス全体を通じてチャートと対話できます。レンダリング プロセスは、以下のフローチャートに記載されています。緑色のプロセスはそれぞれプラグイン通知です。赤い線は、プラグインが戻ったときにレンダリング プロセスの一部のキャンセルがどのように発生するかを示しています。falseフックから。すべてのフックがキャンセル可能であるわけではありませんが、一般に、ほとんどのフックはキャンセル可能です。before*フックはキャンセル可能です。

#イベント処理

プラグインは、イベント処理プロセス中にチャートと対話できます。イベント処理フローを以下のフローチャートに示します。緑色のプロセスはそれぞれプラグイン通知です。プラグインが再レンダリングを必要とする変更を行った場合、プラグインはargs.changedにtrueレンダリングが必要であることを示します。組み込みのツールチップ プラグインは、このメソッドを使用して、ツールチップがいつ変更されたかを示します。

#チャートの破壊

プラグインは破棄プロセス中に通知されます。これらのフックは、プラグインがその存続期間中に作成および使用したものを破棄するために使用できます。 のdestroyフックは Chart.js バージョン 3.7.0 以降非推奨になりました。afterDestroy代わりにフックを付けます。

#TypeScript の入力

プラグインを静的に型指定したい場合は、.d.tsTypeScript 宣言ファイル。 Chart.js は、「宣言のマージ」の概念を使用して、組み込み型をユーザー定義型で拡張する方法を提供します。

プラグインを追加する際には、PluginOptionsByTypeプラグインの宣言を含める必要があります。

たとえば、canvas backgroundColor pluginを追加すると、.d.ts含まれるもの:

import {ChartType, Plugin} from 'chart.js';
declare module 'chart.js' {
  interface PluginOptionsByType<TType extends ChartType = ChartType> {
    customCanvasBackgroundColor?: {
      color?: string
    }
  }
}